<template>
	<view class="player">
		<view class="left">
			<view :class="isRoutation" :style="{backgroundImage:`url(${props.data.img})`}"></view>

		</view>
		<view class="middle" @click="goPlayer">
			{{props.data.text}}
		</view>
		<view class="right">
			<view class="progress" @click="changeStatus">
				<cmd-progress class="cmdProgress" type="circle" :percent="+percent" stroke-color="#4D4C5C" :width="30"
					:showInfo="false">

				</cmd-progress>
				<i class="icon-stop iconfont stop" v-if="status"></i>
				<i class="icon-start iconfont start " v-if="!status"></i>
			</view>

			<view class="" @click="showList">
				<i class="iconfont icon-iconfonticon-shousu"></i>
			</view>
		</view>
		<popList :isOpen="isOpen" />
	</view>
</template>

<script setup>
	import {
		defineProps,
		ref,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import popList from "@/comp/popList.vue"
// import {index,musicList} from "@/store/music.js"
import {bgAudioManager,currentTime,index,musicList} from "@/store/music.js"
import {getMusicApi} from "@/api/music.js"
// import {}
let isOpen = ref(false)
	const props = defineProps({
		data: Object
	})
	const isRoutation = ref("plate")
	let status = ref(false)

	// const bgAudioManager = ref()
	
	
	let percent = ref(0)
	let isEnd=ref(false)
	const changeStatus = () => {
		console.log('改变',status.value)
		status.value = !status.value

		if (status.value) {
			isRoutation.value = "plate rotation"
			
			playVideo()
		} else {
			isRoutation.value = "plate"
			if(!isEnd.value){
				bgAudioManager.value.pause()
			}
				
			
		}


	}
	const playVideo = () => {
		
		if (!bgAudioManager.value || isEnd.value) {
			initVideo(false)
			return
		}
		

		bgAudioManager.value.play();
		
	}
	
	const initVideo=(val)=>{
		let isInit=val
		isEnd.value=false
		bgAudioManager.value = uni.getBackgroundAudioManager();
		bgAudioManager.value.title = musicList.value[index.value].name;
		console.log('zheli',musicList.value[index.value].name,bgAudioManager.value.title)
		bgAudioManager.value.singer = musicList.value[index.value].author;
		// bgAudioManager.value.coverImgUrl = musicList.value[index].coverImgUrl;
		bgAudioManager.value.src = musicList.value[index.value].music;
		
		bgAudioManager.value.onTimeUpdate(() => {
		currentTime.value=bgAudioManager.value.currentTime
			if (bgAudioManager.value.duration > 0) {
				percent.value = ((bgAudioManager.value.currentTime / bgAudioManager.value.duration) * 100)
					.toFixed(2);
				
			}
		});
		bgAudioManager.value.onCanplay(()=>{
			if(isInit){
				bgAudioManager.value.pause()
				isInit=false
			}
		})
		
		bgAudioManager.value.onSeeked(()=>{
			setTimeout(()=>{
				bgAudioManager.value.play()
			},1)
		})
		bgAudioManager.value.onPause(() => {
		  console.log('Audio paused');
		});
		bgAudioManager.value.onEnded(()=>{
			console.log('结束了')
			isEnd.value=true
		
			changeStatus()
		})
	}
	const showList=()=>{
		console.log('点了')
		isOpen.value=true
	}
	watch(()=>index.value,()=>{
		
		initVideo(false)
		// bgAudioManager.value.play()
	})
	onLoad(()=>{
			getMusicApi({size:10,page:1}).then(res=>{
				
				musicList.value=res.data.data.data
				// console.log('res.data',res.data.data)
				initVideo(true)
			})
		
	})
	const goPlayer=()=>{
		
		uni.navigateTo({url:"/pages/player/player"})
	}
</script>

<style lang="scss" scoped>
	.player {
		height: 100rpx;
		width: 100%;
		position: absolute;
		background-color: white;
		z-index: 10000;
		opacity: 1;
		bottom: 0;
		// bottom: calc(var(--status-bar-height) - 1rpx);
		display: flex;
		opacity: 1;

		.left {
			width: 150rpx;
			// text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;

			.plate {
				height: 90rpx;
				border-radius: 50%;
				width: 90rpx;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;

			}
		}

		.middle {
			height: 100%;
			width: calc(100vw - 150rpx - 220rpx);
			text-align: left;
			line-height: 100rpx;
			font-size: 25rpx;
			color: #484854;
			font-weight: 400;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;

		}

		.right {
			width: 220rpx;
			height: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.iconfont {
				font-size: 50rpx;
			}

			.progress {

				position: relative;
				cursor: pointer;



				.stop {
					position: absolute;
					left: 6rpx;
					top: 5rpx
				}

				.start {
					position: absolute;
					left: 20rpx;
					top: 13rpx;
					font-size: 30rpx;
				}
			}

		}
	}

	.rotation {
		animation: rotate 6s linear infinite;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>